<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <title>主页</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link href="common/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css" rel="stylesheet" />
    <script type="text/javascript" src="common/jquery/jquery-3.3.1.js"></script>

    <link href="common/main/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" />

    <style>
        .row{
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 10px;
        }
        .mg-top-15{
            margin-top: 15px;
        }
        .padding-10{
            padding-bottom: 10px;
        }
        .btn-sm i{
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="row mg-top-15">
        <div class="col-md-12 border-bottom padding-10">
            <button class="float-md-right btn btn-info" title="kkk" >
                <i class="fa fa-refresh"></i>
            </button>
        </div>
    </div>
    <div class="row border-bottom padding-10">
        <div class="col-md-1">
            <a class="btn btn-info" href="form.html?op=add">
                <i class="fa fa-apple"></i>
                <span>增加</span>
            </a>
        </div>
        <div class="col-md-1">
            <button class="btn btn-danger">批量删除</button>
        </div>
        <div class="col-md-9">

        </div>
        <div class="col-md-1">
            <p class="text-dark text-center text-justify">共有数据：88</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered table-hover">
                <thead id="cate-head" class="thead-light">
                    <tr>
                        <th scope="col" width="20">
                            <div class="pretty p-icon p-smooth">
                                <input type="checkbox"/>
                                <div class="state p-success">
                                    <i class="icon fa fa-check"></i>
                                    <label></label>
                                </div>
                            </div>
                        </th>
                        <th scope="col">栏目名</th>
                        <th scope="col" width="60">排序</th>
                        <th scope="col" width="70">状态</th>
                        <th scope="col" width="275">操作</th>
                    </tr>
                </thead>
                <tbody id="cate-body">
                    <tr cate-id="1" fid="0">
                        <th scope="row">
                            <div class="pretty p-icon p-smooth">
                                <input type="checkbox"/>
                                <div class="state p-success">
                                    <i class="icon fa fa-check"></i>
                                    <label></label>
                                </div>
                            </div>
                        </th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>
                            <div class="pretty p-switch p-fill">
                                <input type="checkbox" />
                                <div class="state p-success">
                                    <label>Slim</label>
                                </div>
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-info"><i class="fa fa-pencil"></i>编辑</button>
                            <button class="btn btn-sm btn-warning"><i class="fa fa-pencil"></i>添加子栏目</button>
                            <button class="btn btn-sm btn-danger"><i class="fa fa-trash"></i>删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        // document.querySelector("#check").checked = true;
        $(function() {

            //删除操作
            $("#cate-body").on("click", "tr td .btn-danger", function(){
                var cateItem = $(this).parent().parent();
                var cateId = cateItem.attr("cate-id");
                var arr = [];
                var arrCate = relCates(cateId, arr);
                arrCate.push(cateItem);
                for(var i=0; i<arrCate.length; i++){
                    arrCate[i].remove();
                }
            });
            //关联复杂操作
            $("#cate-head tr th>.p-smooth").on("click", function(){
                if($(this).children("input").prop("checked")){
                    $("#cate-body tr th>.p-smooth>input").prop("checked", true);
                }else{
                    $("#cate-body tr th>.p-smooth>input").prop("checked", false);
                }
            });

            $("#cate-body").on("click", "tr th>.p-smooth>input", function() {
                var mark = true;
                var cateBodyInputs = $("#cate-body tr th>.p-smooth>input");
                var cateId = $(this).parents("tr").attr("cate-id");
                var arr = [];
                var arrCates = relCates(cateId, arr);
                arrCates.push($(this).parents("tr"));
                if($(this).prop("checked")){
                    for(var i=0; i<arrCates.length; i++){
                        arrCates[i].find(".p-smooth>input").prop("checked", true);
                    }
                    for(var j=0; j<cateBodyInputs.length; j++){
                        if(!$(cateBodyInputs[j]).prop("checked")){
                            mark = false;
                        }
                    }
                    if(mark){
                        $("#cate-head tr th>.p-smooth>input").prop("checked", true);
                    }
                }else{
                    for(var i=0; i<arrCates.length; i++){
                        arrCates[i].find(".p-smooth>input").prop("checked", false);
                    }
                    $("#cate-head tr th>.p-smooth>input").prop("checked", false);
                }

            });

            //查出关联的条目
            function relCates(cateId, arr) {
                var cates = $("#cate-body tr");
                for(var i=0; i<cates.length; i++){
                    if(cateId == $("#cate-body tr").eq(i).attr("fid")){
                        arr.push($("#cate-body tr").eq(i));
                        relCates($("#cate-body tr").eq(i).attr("cate-id"), arr);
                    }
                }
                return arr;
            }

            function digui(arr,arr1) {
                var arr2 = [];
                if(arr1.length == 0){
                    for(var i=0; i<arr.length; i++){
                        if(arr[i].parentId == 0){
                            arr1.push(arr[i]);
                        }
                    }
                    digui(arr, arr1);
                }else{
                    for(var j=0; j<arr1.length; j++){
                        for(var k=0; k<arr.length; k++){
                            if(arr1[j].id == arr[k].parentId){
                                arr1[j].chil.push(arr[k]);
                                arr2.push(arr[k]);
                            }
                        }
                    }
                    if(arr2.length == 0){
                        return ;
                    }
                    digui(arr, arr2);
                }
                return arr1;
            }

            // var re = digui(cateArr, []);
            function shu(re, index){
                var html = "";
                var mark = true;
                for(var i=0; i<re.length; i++){
                    if(mark){
                        index++;
                        mark = false;
                    }
                    html += "<tr cate-id='"+re[i].id+"' fid='"+re[i].parentId+"'>" +
                                "<th scope='row'>" +
                                    "<div class='pretty p-icon p-smooth'>" +
                                        "<input type='checkbox' />"+
                                        "<div class='state p-success'>" +
                                            "<i class='icon fa fa-check'></i>"+
                                            "<label></label>"+
                                        "</div>"+
                                    "</div>" +
                                "</th>"+
                                "<td style='padding-left: "+index*30+"px'>"+re[i].name+"</td>"+
                                "<td>"+re[i].sortNo+"</td>"+
                                "<td>"+(re[i].status == 1 ? '启用' : '禁用')+"</td>"+
                                "<td>" +
                                    "<button class='btn btn-sm btn-info'><i class='fa fa-pencil'></i>编辑</button>" +
                                    "<button class=\"btn btn-sm btn-warning\"><i class=\"fa fa-pencil\"></i>添加子栏目</button>"+
                                    "<button class=\"btn btn-sm btn-danger\"><i class=\"fa fa-trash\"></i>删除</button>"+
                                "</td>"+
                            "</tr>";
                    if(re[i].chil.length == 0){
                        continue ;
                    }else{
                        html += shu(re[i].chil, index);
                    }
                }

                return html;
            }

            //修改操作
            $("#cate-body").on("click", "tr td .btn-info", function(){
                var cateItem = $(this).parent().parent();
                var cateId = cateItem.attr("cate-id");
                window.location.href = "form.html?op=update&cateId="+cateId;
            });

            //删除操作
            $("#cate-body").on("click", "tr td .btn-warning", function(){
                var cateItem = $(this).parent().parent();
                var cateId = cateItem.attr("cate-id");
                window.location.href = "form.html?op=add&cateId="+cateId;
            });

            $.ajax({
                url: "/sys/menu/queryAllMenu",
                method: "post",
                success: function(data){
                    if(data.messageCode == "001"){
                        for(var i=0; i<data.data.length; i++){
                            data.data[i].chil = [];
                        }
                        var re = digui(data.data, []);
                        var h = shu(re, 0);
                        $("#cate-body").html(h);
                    }
                }
            })

        })
    </script>
</body>
</html>
